<template>
    <div class="app-container">
        <!-- 讲师表单 -->
<!-- 条件查询 -->
<el-form :inline="true" :model="formInline" class="demo-form-inline" >
 <el-form-item >
    <el-input  v-model="courseQuery.title" placeholder="课程名称"></el-input>
  </el-form-item>
    
     <el-select   v-model="courseQuery.status" clearable placeholder="课程发布状态">
      <el-option value="1" label="已经发布"></el-option>
      <el-option  value="2" label="未发布"></el-option>
    </el-select>
  

  <!-- <el-form-item >
    <el-input  v-model="courseQuery.teacherName" placeholder="讲师名称"></el-input>
  </el-form-item>

    <el-form-item >
    <el-input  v-model="courseQuery.price" placeholder="课程价格"></el-input>
  </el-form-item>

   <el-form-item >
    <el-input  v-model="courseQuery.description" placeholder="课程描述"></el-input>
  </el-form-item> -->
 

  <!-- 时间 -->
    <el-form-item label="开始时间">
        <el-date-picker 
            v-model="courseQuery.begin"
            type="datetime"
            placeholder="选择开始时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
        ></el-date-picker>
    </el-form-item>

    <el-form-item label="结束时间">
        <el-date-picker 
            v-model="courseQuery.end"
            type="datetime"
            placeholder="选择截止时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
        ></el-date-picker>
    </el-form-item>


  <el-form-item>
    <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
    <el-button type="default" icon="el-icon-search" @click="restData()">清空</el-button>
  </el-form-item>
</el-form>


<!-- 表格 -->
 <el-table
    :data="list"
    style="width: 100%"
    border
    fit
    highlight-current-row>    
    <!-- 序号 -->
    <el-table-column prop="date" label="序号" width="100" align="center">
        <template slot-scope="scope">
        {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
    </el-table-column>
<!-- 名称 -->
    <el-table-column prop="title" label="课程名称" width="120" />
<!-- 头衔 -->
    <el-table-column  label="课程状态" width="150" >
         <template slot-scope="scope">
             {{scope.row.status==='Normal'?'已经发布':'未发布'}}
         </template>
    </el-table-column>
 <!-- 课程价格 -->
   <el-table-column prop="price" label="课程价格" width="120" />
 <!-- 课时数 -->
   <el-table-column prop="lessonNum" label="课时数" width="120" />
 <!-- 浏览数量 -->
   <el-table-column prop="viewCount" label="浏览数量" width="120" />

<!--添加时间  -->
    <el-table-column prop="gmtCreate" label="添加时间" width="250" />

<!-- 修改删除 -->
     <el-table-column label="操作" width="200" align="center">
    <template slot-scope="scope">
 
<!-- 编辑课程基本信息 -->
        <router-link :to="'/teacher/edit/'+scope.row.id">
        <el-button type="primary" size="mini" icon="el-icon-edit" plain
        @click="updateById(scope.row.id)">编辑课程基本信息</el-button>
        </router-link>
<!-- 编辑课程大纲信息 -->
        <router-link :to="'/teacher/edit/'+scope.row.id">
        <el-button type="primary" size="mini" icon="el-icon-edit" plain
        @click="updateById(scope.row.id)">编辑课程大纲信息</el-button>
        </router-link>       

        <el-button type="danger" size="mini" icon="el-icon-delete" plain
        @click="removeById(scope.row.id)">删除课程基本信息</el-button>

        </template>
     </el-table-column>
  </el-table>


<!--分页 标签  -->

    <el-pagination
    background
    :current-page="page"
    :page-size="limit"
    layout="prev, pager, next,total,jumper"
    :total="total"
    style="padding: 30px 0; text-align: center;"
    @size-change="getCourseList"
    @current-change="getCourseList"
    />  
 
    </div>
</template>


<script>
import course from '@/api/edu/course'

export default {

    data(){
        return{
            list:null,
            
            page:1,
            limit:5,
            total:0,
            courseQuery:{},//查询条件
            courseId:'',
        }


    },


    created(){  //渲染之前调用方法

          this.getCourseList()

           //获取路由课程id值
        if(this.$route.params && this.$route.params.id){
                this.courseId = this.$route.params.id
        }

    },

    methods:{
        //获取课程列表
        getCourseList(page=1){
            this.page =page
            course.getCourseList(this.page,this.limit,this.courseQuery)
            .then(response =>{
                this.list=response.data.rows
                this.total=response.data.total
            })          
        },
        
        restData(){
            //清空查询条件  
            this.courseQuery={},
            //查询所有课程
            this.getCourseList()

        },

        //删除课程
        removeById(id){
            //提示课程删除信息
                 this.$confirm('此操作将删除课程信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                     course.delCourseBycourseId(id).then(response =>{                           
                        //提示信息
                        this.$message({
                        type: 'success',
                        message: '删除成功!'
                        });
                        
                        //回显信息
                           this.$router.push({path:'/course/list'})
                           this.getCourseList()
                    })
                    
                }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '取消删除!'
                    });          
                });


        }


    }

    
}
</script>